<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta content="yes" name="apple-mobile-web-app-capable" />
  <meta content="yes" name="apple-touch-fullscreen" />
  <meta content="telephone=no,email=no" name="format-detection" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>分享页</title>
  <link rel="stylesheet" href="./css/qrcode-share.css" />
  <script src="./js/vue.js"></script>
  <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
  <script src="./js/flex.js"></script>
</head>
<body>
  <!-- <button onclick="down()">点击下载</button> -->
  <div style="position:fixed;background:red;top:0;left:0;right:0;bottom:0;z-index: 100;" onclick="down()"></div>
  <div class="main">
    <img src="./images/bg2x.png" width="100%" alt="">
    <div class="logo"></div>
    <div class="content">
      <div class="head">
        <!-- <img class="head-img" src="http://ztaudio-res.whzcth.com/album/image/41/956f187c-efd1-11e9-80d1-0242ac110004.jpg" width="100%" alt=""> -->
      </div>
      <p class="nickname">不忘初心</p>
      <div class="qr-code" id="qrcode"></div>
    </div>
  </div>
</body>
<script src="./js/tool.js"></script>
<script src="./js/qrcode.min.js"></script>
<script>
  let qrCode = new QRCode("qrcode");
  qrCode.clear();
  qrCode.makeCode('http://www.baidu.com');
  document.getElementById("qrcode").querySelector('img').setAttribute('width', '100%')

  function down(){//这个函数是点击下载执行的方法      
    html2canvas(document.getElementsByClassName('main')[0],{ //这是使用了html2canvas这个插件的方法，将class为whole的整个节点绘制成画布       
      onrendered:function(canvas){  //画布绘制完成后执行下面内容，function内的canvas这个参数就是已经被绘制成画布          
        var link = document.createElement('a');//创建一个a标签        
        link.download = 'my-image-name.jpg';//a标签增加一个download属性，属性值（my-image-name.jpg）就是合成下载后的文件名       
        link.href = canvas.toDataURL();//canvas.toDataURL()就是画布的路径，将路径赋给a标签的href         
        link.click();//模拟a标签被点击，这样就可以下载了       
      },   
    }) 
  }
  getBase64("http://ztaudio-res.whzcth.com/album/image/41/956f187c-efd1-11e9-80d1-0242ac110004.jpg");
  function getBase64(imgUrl) {
      window.URL = window.URL || window.webkitURL;
      var xhr = new XMLHttpRequest();
      xhr.open("get", imgUrl, true);
      // 至关重要
      xhr.responseType = "blob";
      xhr.onload = function () {
        if (this.status == 200) {
          //得到一个blob对象
          var blob = this.response;
          // 至关重要
          let oFileReader = new FileReader();
          oFileReader.onloadend = function (e) {
            let base64 = e.target.result;
            base64 = base64.replace(/application\/octet-stream;/, "image/png;")
            let img = document.createElement("img")
            // img.style.borderRadius = "50%"
            img.setAttribute("src", base64)
            img.setAttribute("width", '100%')

            document.getElementsByClassName('head')[0].appendChild(img)
          };
          oFileReader.readAsDataURL(blob);
          //====为了在页面显示图片，可以删除====
          // var img = document.createElement("img");
          // img.onload = function (e) {
          //   window.URL.revokeObjectURL(img.src); // 清除释放
          // };
          // let src = window.URL.createObjectURL(blob);
          // img.src = src
          // document.getElementById("container1").appendChild(img);
          //====为了在页面显示图片，可以删除====
 
        }
      }
      xhr.send();
    }
    // downloadIamge('head-img', '1.jpg')
    function downloadIamge(selector, name) {
      // 通过选择器获取img元素
      var img = document.getElementsByClassName(selector)[0]
      // 将图片的src属性作为URL地址
      var url = img.src
      var a = document.createElement('a')
      var event = new MouseEvent('click')
      
      a.download = name || '下载图片名称'
      a.href = url
      
      a.dispatchEvent(event)
    }

//     function getBase64Image(img) {  
//      var canvas = document.createElement("canvas");  
//      canvas.width = img.width;  
//      canvas.height = img.height;  
//      var ctx = canvas.getContext("2d");  
//      ctx.drawImage(img, 0, 0, img.width, img.height);  
//      var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();  
//      var dataURL = canvas.toDataURL("image/"+ext);  
//      return dataURL;  
// }  

// var image = new Image();  
// image.src = "http://ztaudio-res.whzcth.com/album/image/41/956f187c-efd1-11e9-80d1-0242ac110004.jpg";  
// image.onload = function(){  
//   var base64 = getBase64Image(image);  
//   console.log(base64);  
// } 
</script>
</html>